<template>
  <!-- 二次封装element table组件 -->
  <div>
    <el-table
      :data="tableData"
      ref="table"
      tooltip-effect="dark"
      class="pdt16"
      style="width: 100%"
    >
      <el-table-column
        v-for="(v, i) of column"
        :key="i"
        :label="v.label"
        :width="v.width"
        :show-overflow-tooltip="v.tooltip"
      >
        <template slot-scope="scope">
          <div v-if="!v.slotScope" class="omit-box">
            {{ scope.row[v.prop] }}
          </div>
          <slot v-if="v.slotScope" :name="v.prop" v-bind="scope"></slot>
        </template>
      </el-table-column>

      <div slot="empty" style="margin-top: 20px" class="emptyBox">
        <img src="@/assets/img/home/empty.png" alt="" />
      </div>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "TableEl",
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
    column: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  watch: {
    tableData() {
      console.log("column", this.column, this.tableData);
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.omit-box {
  min-width: 136px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
